<html><head><meta charset="utf-8"><title>10 Webpack 中样式相关的配置-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/29" target="_blank">Webpack 从零入门到工程化实战</a>
                    <a href="" target="_blank">
                        <span>
                            / 2-4 10 Webpack 中样式相关的配置
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                10 Webpack 中样式相关的配置
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-24 09:25:58
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img.mukewang.com/5cd96367000154f506400360.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">人的影响短暂而微弱，书的影响则广泛而深远。<p class="author">——普希金</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">Webpack 中一切皆模块，CSS 也可以在 JavaScript 中被直接引用，但是 CSS 的语法 JavaScript 是不能解析的，所以下面代码会报错：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">import</span> css <span class="token keyword">from</span> <span class="token string">'./css/index.css'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>css<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5ce24d240001544614440984.png" alt="图片描述" data-original="http://img.mukewang.com/5ce24d240001544614440984.png" class="" style="cursor: pointer;"></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这时候就需要添加 Webpack 的<code>loader</code> 来处理 CSS  了。</p>
</div><div class="cl-preview-section"><h2 id="css-loader" style="font-size: 30px;">css-loader</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">首先添加 css-loader：</p>
</div><div class="cl-preview-section"><pre><code>npm install --save-dev css-loader
# or
npm i -D css-loader
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">然后给<code>webpack.config.js</code>添加<code>rule</code>：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token punctuation">{</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'css-loader'</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这时候修改<code>app.js</code> 添加下面代码：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">import</span> css <span class="token keyword">from</span> <span class="token string">'./css/index.css'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>css<span class="token punctuation">,</span> css<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">效果如下：<br>
<img src="http://img.mukewang.com/5ce24d3a0001c08005570198.png" alt="图片描述" data-original="http://img.mukewang.com/5ce24d3a0001c08005570198.png" class="" style="cursor: pointer;"></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这时候 CSS  会被转成字符串， JS 就可以直接使用。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">除了上面直接在<code>webpack.config.js</code>中添加<code>rule</code>，还可以在 JavaScript 中直接使用下面的方式引入：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">import</span> css <span class="token keyword">from</span> <span class="token string">'css-loader!./css/index.css'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>css<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">上面代码中<code>import css from 'css-loader!./css/index.css'</code>是 webpack loader 的内联写法。</p>
</div><div class="cl-preview-section"><h2 id="style-loader" style="font-size: 30px;">style-loader</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">有了 css-loader 可以识别 CSS 语法了，下面就需要 style-loader 出场了。简单来说，style-loader 是将 css-loader 打包好的 CSS 代码以<code>&lt;style&gt;</code>标签的形式插入到 HTML 文件中，所以<code>style-loader</code>是和<code>css-loader</code>成对出现的，并且<code>style-loader</code>是在<code>css-loader</code>之后。首先安装<code>style-loader</code>：</p>
</div><div class="cl-preview-section"><pre><code>npm install --save-dev style-loader
# or
npm i -D css-loader
</code></pre>
</div><div class="cl-preview-section"><h2 id="mini-css-extract-plugin" style="font-size: 30px;">mini-css-extract-plugin</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">CSS 作为<code>&lt;style&gt;</code>标签放到 HTML 内还是不够的，我们还需要将 CSS 以<code>&lt;link&gt;</code>的方式通过 URL 的方式引入进来，这时候就需要使用<a href="https://github.com/webpack-contrib/mini-css-extract-plugin">mini-css-extract-plugin</a>这个插件了，首先安装它：</p>
</div><div class="cl-preview-section"><pre><code>npm install --save-dev mini-css-extract-plugin
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>mini-css-extract-plugin</code>这个使用的时候需要分别配置 loader 和 plugin，loader 需要放在<code>css-loader</code>之后代替<code>style-loader</code>：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token comment">// 添加 plugin</span>
        <span class="token keyword">new</span> <span class="token class-name">MiniCssExtractPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            filename<span class="token punctuation">:</span> <span class="token string">'[name].css'</span><span class="token punctuation">,</span>
            chunkFilename<span class="token punctuation">:</span> <span class="token string">'[id].css'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span>
                <span class="token comment">// 添加 loader</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">[</span>MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">'css-loader'</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h2 id="css-modules" style="font-size: 30px;">CSS Modules</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">CSS Modules 指的是所有的 CSS 类名及其动画名都只是局部作用域的 CSS 文件。CSS Modules 既不是官方标准，也不是浏览器的特性，而是在构建过程中对 CSS 类名选择器限定作用域的一种方式，如我们的广告样式、某个 UI 通用弹层 SDK 这类样式，都需要避免自己的命名跟宿主环境的样式冲突或者避免被 <a href="https://getadblock.com/">AdBlock</a> 这类广告拦截器拦截掉。CSS Modules 主要解决的问题有：</p>
</div><div class="cl-preview-section"><ol>
<li style="font-size: 20px; line-height: 38px;">解决 CSS 类都是全局的，容易造成全局污染（样式冲突）；</li>
<li style="font-size: 20px; line-height: 38px;">JS 和 CSS 共享类名；</li>
<li style="font-size: 20px; line-height: 38px;">可以方便的编写出更加健壮和扩展方便的 CSS。</li>
</ol>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这类 CSS 模块化的解决方案很早之前前端社区就有一些讨论和方案，比如最早的通过 CSS 命名约定的<a href="http://getbem.com/introduction/">BEM</a>、<a href="http://oocss.org/">OOCSS</a>等，再到 React 中使用的用 JavaScript 来写 CSS 规则的 <a href="https://github.com/MicheleBertoli/css-in-js">CSS in JS</a> 方案，再到通过编译工具来帮助 JavaScript 可以使用 CSS 的 CSS Modules 方案。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面来看下 CSS Modules 究竟是什么，我们来看下代码表现，首先创建一个<code>app.css</code>文件，内容如下：</p>
</div><div class="cl-preview-section"><pre class="  language-css"><code class="prism  language-css"><span class="token comment">/* app.css */</span>
<span class="token selector"><span class="token class">.element</span> </span><span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们知道了，在 JS 中可以直接<code>import</code>一个 CSS 文件：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// app.js</span>
<span class="token keyword">import</span> styles <span class="token keyword">from</span> <span class="token string">'./app.css'</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">那么 CSS Modules 中，JS 可以直接使用 CSS 的类名作为对象值，例如下面代码：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// app.js</span>
<span class="token keyword">import</span> styles <span class="token keyword">from</span> <span class="token string">'./app.css'</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> element <span class="token operator">=</span> <span class="token template-string"><span class="token string">`
  &lt;div class="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>styles<span class="token punctuation">.</span>element<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"&gt;
    &lt;p&gt;CSS Modules&lt;/p&gt;
  &lt;/div&gt;
`</span></span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在 css-loader 增加<code>modules</code>的选项，说明打开 CSS Modules 支持。</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                    <span class="token string">'style-loader'</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        loader<span class="token punctuation">:</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
                        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                            modules<span class="token punctuation">:</span> <span class="token boolean">true</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">执行 WebPack 打包，最终效果如下：<br>
<img src="http://img.mukewang.com/5ce24dbf0001d51007800341.png" alt="图片描述" data-original="http://img.mukewang.com/5ce24dbf0001d51007800341.png" class="" style="cursor: pointer;"></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">跟 CSS Modules 相关的配置还有很多，具体可以在<code>css-loader</code>对应的<a href="https://github.com/webpack-contrib/css-loader">文档</a>找到。</p>
</div><div class="cl-preview-section"><h2 id="css-预处理器" style="font-size: 30px;">CSS 预处理器</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">由于 CSS 标准自诞生以来，一直致力于在表现力层面的发展，相对基本语法和核心机制并没有实质性的变化，所以产生了好多 CSS 的预处理器。预处理器补足了 CSS 的一些语法上的缺陷，支持变量、运算、函数、作用域、继承、嵌套写法等，使用 CSS 预处理器可以大大的提升开发效率和体验，同时能够更好的做好模块化开发。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：CSS 核心语法直到近些年才有大的发展，比如自定义属性（custom properties，又称为变量 variables） 、嵌套写法，但是已经远远的落后于 CSS 预处理器的发展。</p>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">常见的 CSS 预处理器有：<a href="http://lesscss.org/">Less</a>，<a href="https://sass-lang.com/">Sass 及其语法变种 Scss</a>和<a href="http://stylus-lang.com/">Stylus</a>。</p>
</div><div class="cl-preview-section"><h3 id="使用预处理器-loader">使用预处理器 loader</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面以 Less 预处理器为例，介绍 CSS 预处理器的用法。首先安装对应的 loader：<a href="https://github.com/webpack-contrib/less-loader"><code>less-loader</code></a>：</p>
</div><div class="cl-preview-section"><pre class="  language-shell"><code class="prism  language-shell">npm i -D less-loader
# or
npm install less-loader --save-dev
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">然后修改<code>webpack.config.js</code>：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// webpack.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//   ...</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.less$/</span><span class="token punctuation">,</span>
                loader<span class="token punctuation">:</span> <span class="token string">'less-loader'</span> <span class="token comment">// 将 Less 编译为 CSS</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>less-loader</code>只是将 Less 语法编译成 CSS，后续还需要使用<code>css-loader</code>和<code>style-loader</code>处理才可以，所以一般来说需要配合使用：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// webpack.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//   ...</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.less$/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                    <span class="token string">'style-loader'</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        loader<span class="token punctuation">:</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
                        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                            modules<span class="token punctuation">:</span> <span class="token boolean">true</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token string">'less-loader'</span> <span class="token comment">// 将 Less 编译为 CSS</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：注意一些预处理语言需要安装对应的解析器，例如 sass-loader，需要同时安装 node-sass：<code>npm install sass-loader node-sass --save-dev</code></p>
</blockquote>
</div><div class="cl-preview-section"><h2 id="postcss：css-后处理器" style="font-size: 30px;">PostCSS：CSS 后处理器</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">好吧，可能是 CSS 实在是太弱了，有了预处理器之后，又出现了后处理器 PostCSS（另外也有称 PostCSS 也为另外一种 CSS 预处理器的），不过 PostCSS 的出现的确解决了很多问题，让我们写 CSS 更加轻松，类似不同浏览器前缀的写法，只需要使用引入一个名字叫<a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>的 PostCSS 插件就可以使用标准的语法，在构建的过程中，PostCSS 会根据适配的浏览器使用 Autoprefixer 插件自动添加不同浏览器的适配。</p>
</div><div class="cl-preview-section"><pre class="  language-css"><code class="prism  language-css"><span class="token comment">/*没有前缀的写法*/</span>
<span class="token selector"><span class="token class">.flex</span> </span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/*经过 postcss autoprefixer 处理后*/</span>
<span class="token selector"><span class="token class">.flex</span> </span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> -webkit-flex<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> -ms-flexbox<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：PostCSS 是一个使用 JavaScript 插件来转换 CSS 的工具，PostCSS 核心是将 CSS 解析成 AST，然后通过各种插件做各种转换，最终生成处理后的新 CSS，跟 Babel 在功能和实现上都类似，这里就不再详细讲解实现原理了。在语法转换上还有一个开源项目<a href="http://cssnext.io">cssnext</a>，使用最新的 CSS 标准来写 CSS，通过 cssnext 可以转换成对应的 CSS 版本。</p>
</blockquote>
</div><div class="cl-preview-section"><h3 id="postcss-loader">postcss-loader</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">使用 PostCSS 需要安装<a href="https://github.com/postcss/postcss-loader">postcss-loader</a>，然后按照 loader 顺序，在 css-loader 之前（注意 loader 顺序：从右到左，从后到前）加上 postcss-loader：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// webpack.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//   ...</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        resule<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                    <span class="token string">'style-loader'</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        loader<span class="token punctuation">:</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
                        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                            modules<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                            importLoader<span class="token punctuation">:</span> <span class="token number">1</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token string">'postcss-loader'</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果有 CSS 预处理语言，则配置写法：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// webpack.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//   ...</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.less$/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                    <span class="token string">'style-loader'</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        loader<span class="token punctuation">:</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
                        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                            modules<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                            importLoader<span class="token punctuation">:</span> <span class="token number">2</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token string">'less-loader'</span><span class="token punctuation">,</span>
                    <span class="token string">'postcss-loader'</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="postcss-配置">PostCSS 配置</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">通过 PostCSS 的强大插件系统，不仅可以处理 CSS 语法，还可以处理 CSS 预处理器的语法，实现的功能也有很多，包括添加前缀、最新语法转义、压缩等，甚至可以扩展 CSS 的语言特性。配置了 postcss-loader 之后，WebPack 就可以使用 PostCSS 来处理 CSS了。但是 PostCSS 本身只不过是将 CSS 解析成 AST ，真正起作用的还需要依赖其强大的插件系统。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">所以，PostCSS 配置其实主要是配置其使用哪些插件，PostCSS 的配置写法有以下三种方式：</p>
</div><div class="cl-preview-section"><ol>
<li style="font-size: 20px; line-height: 38px;">通过配置文件<code>postcss.config.js</code>，一般放置在项目的根目录下；</li>
<li style="font-size: 20px; line-height: 38px;">通过 loader 的配置项<code>options</code>；</li>
<li style="font-size: 20px; line-height: 38px;">直接在 package.json 中添加个<code>postcss</code>属性。</li>
</ol>
</div><div class="cl-preview-section"><h4 id="postcss.config.js" style="font-size: 26px;">postcss.config.js</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>postcss.config.js</code>完全是按 Node.js 模块写法来写，使用什么插件就引入什么插件依赖：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// postcss.config.js</span>
<span class="token keyword">const</span> autoprefixer <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token function">autoprefixer</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'IE 10'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h4 id="loader-配置项-options" style="font-size: 26px;">loader 配置项 options</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在<code>webpack.config.js</code>中，直接配置了<code>postcss-loader</code>之后，然后通过<code>loader</code>的<code>options</code>可以配置 postcss 的参数。</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// 引入postcss 插件</span>
<span class="token keyword">const</span> autoprefixer <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                    <span class="token string">'style-loader'</span><span class="token punctuation">,</span>
                    <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        loader<span class="token punctuation">:</span> <span class="token string">'postcss-loader'</span><span class="token punctuation">,</span>
                        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                            <span class="token comment">// 通过 plugins 选项</span>
                            plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token function">autoprefixer</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'IE 10'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h4 id="package.json-中添加个postcss属性" style="font-size: 26px;">package.json 中添加个<code>postcss</code>属性</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">最后一种方式是在<code>package.json</code>文件中添加<code>postcss</code>属性，<strong>这种方式受限于 json 的语法，可扩展性较弱，一般不推荐！</strong></p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
    <span class="token string">"postcss"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token string">"plugins"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token string">"autoprefixer"</span><span class="token punctuation">:</span> <span class="token string">"IE 10"</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面介绍几个项目中可能用到的 postcss 插件，带大家学习下 postcss 插件的基本用法。</p>
</div><div class="cl-preview-section"><h3 id="autoprefixer">Autoprefixer</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>Autoprefixer</code>这个插件前面内容已经简单提到过，就是给 css 补齐各种浏览器私有的前缀，例如<code>-webkit</code>、<code>-moz</code>、<code>-ms</code>等，当然还会处理各种兼容性问题，比如 flex 语法，不能简单添加<code>-webkit</code>就解决，还需要处理成<code>-webkit-box</code>这类老版本的标准。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">Autoprefixer 还支持各种 IDE 插件，可以在 IDE 中直接转换对应的 css 文件（不推荐这样用，多人合作项目跟进 IDE 配置不同，转换的文件也会存在差异）。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">Autoprefixer 的主要参数就是 browserslist，即需要代码支持的浏览器列表，这部分内容在 babel 章节已经介绍过了。其他相关的参数说明可以在文档中找到：<a href="https://github.com/postcss/autoprefixer#options%E3%80%82">https://github.com/postcss/autoprefixer#options。</a></p>
</div><div class="cl-preview-section"><h3 id="postcss-preset-env">postcss-preset-env</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><a href="https://preset-env.cssdb.org">postcss-preset-env</a>是跟 babel 的 preset-env 类似的功能，通过它可以安心的使用最新的 CSS 语法来写样式，不用关心浏览器兼容性，浏览器兼容的问题交给了 postcss-preset-env 和 WebPack，在打包构建的时候，会根据不同的配置输出对应支持的 CSS 文件。postcss-preset-env 支持的 CSS 标准，完全可以媲美 CSS 预处理器的功能，所以如果对 cssnext 新的标准比较熟悉，可以直接用新标准来写样式，这样等到浏览器支持新标准之后可以无缝切换到 cssnext 语法，那么可以直接抛弃 CSS 预处理器，直接使用 cssnext 语法来写样式，通过 WebPack 和 postcss-preset-env 来构建。</p>
</div><div class="cl-preview-section"><h3 id="precss">PreCSS</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果我们厌倦 cssnext 的变量定义方式，想使用 Sass 的语法，而又不想引入 Sass 这个 CSS 预处理器，<a href="https://github.com/jonathantneal/precss">PreCSS</a>就是你的选择。使用 PreCSS，可以写类 Sass 和 cssnext 语法的 CSS，详细可以参考它的<a href="https://github.com/jonathantneal/precss">文档</a>。</p>
</div><div class="cl-preview-section"><h3 id="cssnano">cssnano</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><a href="https://cssnano.co/">cssnano</a>是一个强大的 PostCss 插件，在 CSS 压缩优化中会经常被用到，它有别于常规的 CSS 压缩工具只是去除空格注释，还支持根据 CSS 语法解析结果<strong>智能</strong>压缩代码，比如合并一些类写法：</p>
</div><div class="cl-preview-section"><pre class="  language-css"><code class="prism  language-css"><span class="token comment">/*未经 cssnano 处理之前的 css*/</span>
<span class="token selector"><span class="token class">.a</span> </span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.b</span> </span><span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> bolder<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.c</span> </span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> bolder<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.d</span> </span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">经过 cssnano 处理之后的 CSS 文件，会合并压缩一些类，缩短一些常见的值，例如颜色值等：</p>
</div><div class="cl-preview-section"><pre class="  language-css"><code class="prism  language-css"><span class="token comment">/*经 cssnano 处理之后的 css*/</span>
<span class="token selector"><span class="token class">.a</span> </span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#ff0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.a</span>,
<span class="token class">.b</span> </span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.b</span>,
<span class="token class">.c</span> </span><span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> bolder<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.c</span> </span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#ff0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.c</span>,
<span class="token class">.d</span> </span><span class="token punctuation">{</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.d</span> </span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">cssnano 的配置会在 WebPack 优化章节继续详细介绍。</p>
</div><div class="cl-preview-section"><h2 id="解惑：理解-css-loader-的-importloaders-参数" style="font-size: 30px;">解惑：理解 css-loader 的 importLoaders 参数</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在 css-loader 的文档中，有个比较引起疑惑的参数项：<code>importLoaders</code>，这个参数用于配置 <strong>css-loader 作用于 <code>@import</code>的资源之前</strong>有多少个 loader。给出的示例代码如下：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token punctuation">{</span>
  test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span>
  use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token string">'style-loader'</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      loader<span class="token punctuation">:</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
      options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        importLoaders<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token comment">// 0 =&gt; 默认，没有 loader; 1 =&gt; postcss-loader; 2 =&gt; postcss-loader, sass-loader</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">'postcss-loader'</span><span class="token punctuation">,</span>
    <span class="token string">'sass-loader'</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">通过示例并不能看出来配置<code>importLoaders</code>是否对项目打包有什么差异，下面通过实例代码来看下加上<code>importLoaders</code>和没添加有什么区别。首先我们创建两个文件：<code>style.css</code>和<code>body.css</code>，<code>style.css</code>中通过<code>@import 'body.css';</code>引入<code>body.css</code>：</p>
</div><div class="cl-preview-section"><pre class="  language-css"><code class="prism  language-css"><span class="token comment">/* style.css */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">'body.css'</span><span class="token punctuation">;</span></span>
<span class="token selector">body </span><span class="token punctuation">{</span>
    <span class="token comment">/*background: yellow;*/</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div </span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* body.css */</span>
<span class="token selector"><span class="token class">.body-import</span> </span><span class="token punctuation">{</span>
    <span class="token comment">/* body import */</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在这两个文件中，分别添加了两个特殊属性的 CSS 值：<code>display: flex;</code>，目的是使用<code>autoprefixer</code>对其进行处理，如果 postcss-loader 都起作用，则 <code>display: flex;</code>都会被处理添加对应的浏览器前缀，如果<code>importLoaders</code>设置不同，则根据文档输出的 CSS 会有差异，具体的差异就是我们需要理解的地方。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">第二步，创建 entry 文件<code>import-loader.js</code>和 WebPack 配置文件<code>webpack.config.importLoader.js</code>，在 WebPack 配置文件中，一个 css-loader 没有使用<code>importLoaders</code>，一个使用了<code>importLoaders=1</code>，内容如下（为了方便查看 CSS 的差异，这里使用了<a href="https://github.com/webpack-contrib/mini-css-extract-plugin">mini-css-extract-plugin</a> 直接打包出两个 CSS 文件）：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// entry: import-loader.js</span>
<span class="token keyword">import</span> styles <span class="token keyword">from</span> <span class="token string">'./css/style.css'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>styles<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// webpack.config.importLoader.js</span>
<span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        entry<span class="token punctuation">:</span> <span class="token string">'./import-loader.js'</span><span class="token punctuation">,</span>
        mode<span class="token punctuation">:</span> <span class="token string">'development'</span><span class="token punctuation">,</span>
        module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                    test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span>
                    use<span class="token punctuation">:</span> <span class="token punctuation">[</span>MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span> <span class="token string">'postcss-loader'</span><span class="token punctuation">]</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token comment">// 添加 plugin</span>
            <span class="token keyword">new</span> <span class="token class-name">MiniCssExtractPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                filename<span class="token punctuation">:</span> <span class="token string">'no-import-loaders.css'</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        entry<span class="token punctuation">:</span> <span class="token string">'./import-loader.js'</span><span class="token punctuation">,</span>
        mode<span class="token punctuation">:</span> <span class="token string">'development'</span><span class="token punctuation">,</span>
        module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                    test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span>
                    use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                        MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span>
                        <span class="token punctuation">{</span>
                            loader<span class="token punctuation">:</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
                            options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                                importLoaders<span class="token punctuation">:</span> <span class="token number">1</span>
                            <span class="token punctuation">}</span>
                        <span class="token punctuation">}</span><span class="token punctuation">,</span>
                        <span class="token string">'postcss-loader'</span>
                    <span class="token punctuation">]</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token comment">// 添加 plugin</span>
            <span class="token keyword">new</span> <span class="token class-name">MiniCssExtractPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                filename<span class="token punctuation">:</span> <span class="token string">'with-import-loaders.css'</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">第三步创建 PostCSS 配置文件，添加<code>autoprefixer</code>，增加一个 IE10 浏览器的配置：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// postcss.config.js</span>
<span class="token keyword">const</span> autoprefixer <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token function">autoprefixer</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'IE 10'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">都准备完毕了，下面执行命令<code>webpack --config webpack.importLoader.js</code>，打包后的文件内容如下：</p>
</div><div class="cl-preview-section"><pre class="  language-css"><code class="prism  language-css"><span class="token comment">/* no-import-loaders.css */</span>
<span class="token selector"><span class="token class">.body-import</span> </span><span class="token punctuation">{</span>
    <span class="token comment">/* body import */</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">body </span><span class="token punctuation">{</span>
    <span class="token comment">/*background: yellow;*/</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">div </span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> -ms-flexbox<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><pre class="  language-css"><code class="prism  language-css"><span class="token comment">/* with-import-loaders.css */</span>
<span class="token selector"><span class="token class">.body-import</span> </span><span class="token punctuation">{</span>
    <span class="token comment">/* body import */</span>
    <span class="token property">display</span><span class="token punctuation">:</span> -ms-flexbox<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">body </span><span class="token punctuation">{</span>
    <span class="token comment">/*background: yellow;*/</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">div </span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> -ms-flexbox<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">通过观察打包出来的两个 CSS 文件发现，使用<code>@import 'body.css'</code>引入了<code>body.css</code>文件之后，<code>body.css</code>的 CSS 因为配置了不同的<code>importLoaders</code>所以表现不一样：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">未使用<code>importLoaders</code>：被<code>styles.css</code>引入的 <code>body.css</code>内的<code>display: flex;</code><strong>未添加了前缀</strong>，说明 postcss <strong>没有作用</strong>到<code>@import</code>引入的文件中；</li>
<li style="font-size: 20px; line-height: 38px;">使用了<code>importLoaders=1</code>：被<code>styles.css</code>引入的 <code>body.css</code>内的<code>display: flex;</code><strong>也被添加了前缀</strong>，说明 postcss <strong>作用到了</strong>被<code>@import</code>引入的文件中。</li>
</ul>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：除了设置 css-loader 的<code>importLoaders</code>，如果使用 PostCSS 则可以使用它的插件：<a href="https://github.com/postcss/postcss-import">postcss-import</a> 同样可以处理<code>@import</code>引入的 CSS 代码：</p>
</blockquote>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> autoprefixer <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> postcssImport <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-import'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token function">postcssImport</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">autoprefixer</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'IE 10'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><div class="summary"><h5 class="centertitle" style="font-size: 20px; line-height: 38px;">小结 </h5></div><!--title:&#23567;&#32467; -->
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节主要介绍了 Webpack 中 CSS 相关的配置，主要内容包含：CSS Webpack 配置、CSS 预处理器配置和 PostCSS 配置。CSS 配置相对来说比较复杂，如果我们使用 CSS 的预处理器来编写代码，首先需要配置对应的预处理器 loader，将扩展的语法转成 CSS 代码，然后在配合 css-loader 和 style-loader。在生产环境推荐使用 mini-css-extract-plugin 将 CSS 内容导出到 CSS 文件来供页面单独引入。PostCSS 是一个强大的 CSS 后处理器，我们通过 PostCSS 的强大插件可以实现 CSS 前缀的自动添加（autoprefixer），还可以更加智能的实现 CSS 的压缩（cssnano）等功能。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">本小节 Webpack 相关面试题：</p>
<ol>
<li style="font-size: 20px; line-height: 38px;">怎么使用 PostCSS 来处理 CSS；</li>
<li style="font-size: 20px; line-height: 38px;">你会在 Webpack 中使用 CSS module 吗？</li>
<li style="font-size: 20px; line-height: 38px;">Webpack 的 style-loader 和 css-loader 有什么区别？</li>
</ol>
</blockquote>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/267">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    09 Webpack 中使用 TypeScript 开发项目
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/269">
                                                    <div class="next r clearfix">
                                <p>
                                    11 Webpack 中使用 lint 工具来保证代码风格和质量
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>